<!--专区聚会，如自驾游-->
<template>
  <f7-page no-toolbar
    infinite
    :infinite-distance="50"
    :infinite-preloader="showPreloader"
    @infinite="loadMore"
    ptr @ptr:refresh="loadMore2"
  >
    <f7-navbar title="自驾游·聚" back-link="Back"></f7-navbar>

    <f7-card class="demo-card-header-pic" v-for="(item, index) in items" :key="index" >
      <f7-card-header
              class="no-border text-color-white"
              valign="bottom"
              style="background-image:url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg);height: 150px;"
      >2019年第一波松山湖自驾游</f7-card-header>
      <f7-card-content style="line-height: 4px;" href="/activity/actDetail/" @click="cardClick">
        <p class="date">时间：2010-01-01 15:00</p>
        <p style="line-height: 18px;">各位驴友，自驾游的胜地,各位驴友，自驾游的胜地，各位驴友，自驾游的胜地，各位驴友，自驾游的胜地</p>
      </f7-card-content>
      <f7-card-footer>
        <f7-button>收藏</f7-button>
        <f7-button href="/activity/actDetail/">报名</f7-button>
      </f7-card-footer>
    </f7-card>

<!--    <f7-list media-list class="test-content">
      &lt;!&ndash;<f7-list-item v-for="(item, index) in items" :key="index">&ndash;&gt;

        <f7-list-item v-for="(item, index) in items" :key="index"
                link="#"
                title="Yellow Submarine"
                after="$15"
                subtitle="Beatles"
                text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
        >
          <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="80" />
        </f7-list-item>

      &lt;!&ndash;</f7-list-item>&ndash;&gt;
    </f7-list>-->
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        allowInfinite: true,
        showPreloader: true,
      };
    },
    methods: {
      loadMore() {
        const self = this;
        if (!self.allowInfinite) return;
        self.allowInfinite = false;

        setTimeout(() => {
          if (self.items.length >= 200) {
            self.showPreloader = false;
            return;
          }

          const itemsLength = self.items.length;

          for (let i = 1; i <= 20; i += 1) {
            self.items.push(itemsLength + i);
          }

          self.allowInfinite = true;
        }, 1000);
      },
      loadMore2(event, done) {

        setTimeout(() => {
          // todo
          done();
        }, 1000);
      },
      cardClick(){
        console.info("点击card");
      }
    },
  };
</script>
<style scoped>
  .test-content {
    margin: 0px;
  }
</style>
